<template>
	<view>
		<view :style="{ height: `${navHeight}px` }"></view>
		<view class="custom_head" :style="{ height: `${navHeight}px` }">
			<view
				:class="isBar ? 'flex_topO' : 'flex_topI'"
				:style="{
					height: `${navObj}px`,
					paddingTop: `${navTop}px`,
					paddingRight: `${navObjWid + 5}px`,
				}"
			>
				<uni-icons
					type="back"
					size="25"
					color="#ffffff"
					v-if="isBack"
					@click="goBack"
					style="position: absolute; left: 20rpx"
				/>
				<view class="df ac" @tap="switchName">
					<view v-if="isShowLogo"
						><image
							style="width: 50rpx; height: 50rpx"
							src="@/static/img/logo.png"
						></image
					></view>
					<view
						class="head_store text-clamp-1"
						:class="title && title.length > 15 ? 'ml70' : ''"
						>{{ title }}</view
					>
					<view
						style="margin-left: -15rpx; margin-top: 5rpx"
						v-if="isShowBottom"
						><image
							style="width: 50rpx; height: 50rpx"
							src="https://yilife-oss-dev-public.oss-cn-hangzhou.aliyuncs.com/34/130595/ORG/p0h9vrzt1eklji6elu7sr744u.png"
						></image
					></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'custom-nav',
	props: {
		title: String,
		isBar: {
			type: Boolean,
			default: false,
		},
		isBack: {
			type: Boolean,
			default: true,
		},
		isShowLogo: {
			type: Boolean,
			default: false,
		},
		isShowBottom: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			navHeight: 60,
			navTop: '',
			navObj: '',
			navObjWid: '',
		}
	},
	created() {
		let menuButtonObject = wx.getMenuButtonBoundingClientRect()
		wx.getSystemInfo({
			success: (res) => {
				//导航高度
				let statusBarHeight = res.statusBarHeight,
					navTop = menuButtonObject.top,
					navObjWid =
						res.windowWidth -
						menuButtonObject.right +
						menuButtonObject.width, // 胶囊按钮与右侧的距离 = windowWidth - right+胶囊宽度
					navHeight =
						statusBarHeight +
						menuButtonObject.height +
						(menuButtonObject.top - statusBarHeight) * 2
				this.navHeight = navHeight //导航栏总体高度
				this.navTop = navTop //胶囊距离顶部距离
				this.navObj = menuButtonObject.height //胶囊高度
				this.navObjWid = navObjWid //胶囊宽度(包括右边距离)
				console.log(
					navHeight,
					navTop,
					menuButtonObject.height,
					navObjWid
				)
				uni.setStorageSync('navHeight', this.navHeight)
			},
			fail(err) {
				console.log(err)
			},
		})
	},
	methods: {
		switchName() {
			this.$emit('switch')
		},
		goBack() {
			let pages = getCurrentPages()
			if (pages.length > 1) {
				uni.navigateBack({
					delta: 1,
				})
			} else {
				uni.switchTab({
					url: `/pages/index/index`,
				})
			}
		},
	},
}
</script>

<style scoped lang="scss">
.custom_head {
	width: 750rpx;
	background: linear-gradient(180deg, #3a74fc 0%, #8eadf5 100%);
	color: #fff;
	position: fixed;
	top: 0;
	z-index: 999;
}

.head_store {
	font-size: 34rpx;
	// width: 340rpx;
	margin-right: 15rpx;
	margin-left: 12rpx;
}
.flex_topI,
.flex_topO {
	display: flex;
	align-items: center;
	padding-left: 20rpx;
	width: 100%;
}
.flex_topI {
	justify-content: center;
	padding-left: 0;
}
.ml70 {
	margin-left: 70rpx;
}
</style>
